<template>
  <div>
    <el-button type="primary" class="mb-4" @click="addLanguage(1)"
      >新增</el-button
    >
    <el-table :data="tableData" style="height: calc(100vh - 250px)">
      <el-table-column prop="id" label="ID"   width="100"/>
      <el-table-column label="文章分类">
        <template #default="scope">
          <el-space>
          <!-- <el-text truncated style="width: 100px">{{ scope.row.name }}</el-text> -->
          <el-tooltip effect="dark" :content="scope.row.name">
              <el-text truncated style="width: 100px">{{
                scope.row.name
              }}</el-text>
            </el-tooltip>
          <el-button type="primary" link @click="addLanguage(0, scope.row)"
            >查看翻译</el-button
          >
        </el-space>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-switch
            :width="58"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-text="开启"
            inactive-text="关闭"
            inline-prompt
            @change="switchProcess(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :limit="queryParams.pageSize"
      :page="queryParams.pageNum"
      @pagination="handlePageChange"
    ></Pagination>

    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :before-close="handleClose"
      width="800px"
    >
      <el-form
        :model="languageParams"
        ref="sortArticleForm"
        label-position="left"
      >
        <el-form-item prop="description">
          <MoreLanguage
            :newList="languageParams.descriptions"
            label="分类名称"
            :showRemark="true"
            @publicCheck="publicCheck"
          ></MoreLanguage>
        </el-form-item>
        <el-form-item label="状态" prop="status" required>
          <el-switch
            :width="58"
            v-model="languageParams.status"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            active-text="显示"
            inactive-text="关闭"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="display: flex; justify-content: space-between">
          <el-button type="primary" @click="handleSortAdd">添加</el-button>
          <el-button
            type="danger"
            @click="handleDelete(0)"
            style="margin-right: 400px"
            >删除</el-button
          >
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSure(sortArticleForm)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <Translation
      :dialogVisible="openViewTranslate"
      :languageList="translateData"
      @handleTranslationClose="handleTranslationClose"
    ></Translation>
  </div>
</template>
  <script setup >
import { ref, reactive, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const publicItem = ref({});
const dialogVisible = ref(false); //默认不显示弹出框
const tableData = ref([]);
const title = ref("新增");
const total = ref(0);
const isAdd = ref(true); //默认是新增
const sortArticleForm = ref();
const switchLoading = ref(false);
const checkedBrandDescription = ref([]);
const openViewTranslate = ref(false);// 查看翻译
const translateData = ref([]);//多语言列表数据

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  param: {},
});
const languageParams = ref({
  status: 1,
  descriptions: [],
});

onMounted(() => {
  getList();
});
// 获取列表
const getList = () => {
  site.SiteArticleCategory.sitearticlecategoryGetlist({
    data: queryParams.value,
  }).then((res) => {
    switchLoading.value = true;
    total.value = res.total;
    tableData.value = res.data;
  });
};
// 编辑
const handleEdit = (rowItem) => {
  publicItem.value = rowItem;
  site.SiteArticleCategory.sitearticlecategoryGetbyid({
    pathParams: {
      id: rowItem.id,
    },
  }).then((res) => {
    if (res.code == 200) {
      dialogVisible.value = true;
      isAdd.value = false;
      title.value = "编辑";
      languageParams.value.status = res.data.status;
      languageParams.value.descriptions = res.data.descriptionList;
    }
  });
};
const addLanguage = (index, e) => {
  if (index) {
    dialogVisible.value = true;
    title.value = "新增";
    isAdd.value = true;
    languageParams.value.descriptions.push({
      languageId: 1,
      name: "",
      description: "",
    });
  } else {
    site.SiteArticleCategory.sitearticlecategoryGetbyid({
      pathParams: {
        id: e.id,
      },
    }).then((res) => {
      if (res.code === 200) {
        openViewTranslate.value = true;
        translateData.value = res.data.descriptionList;
      }
    });
  }
};

// 确定
const handleSure = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) return;
    if (!proxy.publicArray(languageParams.value.descriptions))
      return proxy.$modal.msgError("请完整填写新增语言");
    if (isAdd.value) {
      site.SiteArticleCategory.sitearticlecategoryAdd({
        data: languageParams.value,
      }).then((res) => {
        if (res.code === 200) {
          handleClose();
          getList();
          proxy.$modal.msgSuccess("新增成功");
          proxy.resetForm("sortArticleForm");
        }
      });
    } else {
      site.SiteArticleCategory.sitearticlecategoryUpdate({
        pathParams: {
          id: publicItem.value.id,
        },
        data: languageParams.value,
      }).then((res) => {
        if (res.code === 200) {
          handleClose();
          getList();
          proxy.$modal.msgSuccess("修改成功");
        }
      });
    }
  });
};
// 删除
const handleDelete = (index, rowItem) => {
  if (index) {
    var newArray = [];
    newArray.push(rowItem.id);
    proxy.$modal.confirm("是否确认删除此数据类型？").then(() => {
      site.SiteArticleCategory.sitearticlecategoryDeletebatch({
        data: {
          ids: newArray,
        },
      }).then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$modal.msgSuccess("删除成功");
        }
      });
    });
  } else {
    if (!checkedBrandDescription.value.length)
      return proxy.$modal.msgError("请勾选");
    languageParams.value.descriptions =
      languageParams.value.descriptions.filter(
        (item) => !checkedBrandDescription.value.includes(item.index)
      );
    checkedBrandDescription.value = [];
  }
};
const switchProcess = (rowItem) => {
  if (!switchLoading.value) return;
  proxy.$modal
    .confirm("是否确认修改此数据类型？")
    .then(() => {
      site.SiteArticleCategory.sitearticlecategoryUpdatestatus({
        pathParams: {
          id: rowItem.id,
        },
        params: {
          status: rowItem.status,
        },
      }).then((res) => {
        if (res.code === 200) {
          getList();
          proxy.$modal.msgSuccess(res.message);
        }
      });
    })
    .catch((err) => {
      if (rowItem.status) {
        return (rowItem.status = 0);
      } else {
        return (rowItem.status = 1);
      }
    });
};
/** 复选框选中数据 */
const publicCheck = (rowList) => {
  checkedBrandDescription.value = rowList;
};
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
const handleSortAdd = () => {
  let obj = {
    languageId: null,
    name: "",
    description: "",
  };
  languageParams.value.descriptions.push(obj);
};
// 取消
const handleClose = () => {
  proxy.resetForm("sortArticleForm");
  languageParams.value.descriptions = [];
  isAdd.value = false;
  dialogVisible.value = false;
};
const handleTranslationClose=()=>{
  openViewTranslate.value = false;
}
</script>